<template>
	<view>
		<view class="cart-list">
			<view class="cart-item" 
			v-for="(item,index) in cartList" :key="index">
				<view class="left">
					<image :src="item.image"></image>
				</view>
				<view class="right">
					<text class="tit1">{{item.title}}</text>
					<text class="tit2">{{item.attr_val}}</text>
					<text class="price">¥{{item.price}}</text>
					<text class="stock">库存:{{item.stock}}</text>
					<lc-number-box color="#666" :fillet="false" 
					:value="item.number"
					@change="numberChange"
						:min="1" 
						:max="item.stock"
					></lc-number-box>
				</view>
			</view>
		<!-- 	<view class="total">
				<text>总计:{{}}</text>
			</view> -->
		</view>
	</view>
</template>

<script>
import Api from '../../Api.js';
import lcNumberBox from '../../components/lc-number-box/lc-numberBox.vue';
export default {
	data() {
		return {
			cartList:[]
		}
	},
	components: {lcNumberBox},
	
	onLoad(){
		this.cartList=Api.cartList
		console.log(this.cartList)
	},
	methods: {
		numberChange(e){
			console.log(e)
		}
	}
}
</script>

<style lang="scss">
	.cart-list{
		width:100%;
		.cart-item{
			display: flex;
			width: 100%;
			height: 240rpx;
			margin-bottom: 50rpx;
			margin-left: 20rpx;
			.left{
				width: 240rpx;
				height: 100%;
				margin-right: 20rpx;
				image{
					width: 240rpx;
					height: 240rpx;
				}
			}
			.right{
				width: 100%;
				display: flex;
				flex-direction: column;
				.tit1{
					font-size: 30rpx;
					color: #303133;
					height: 40rpx;
					line-height: 40rpx;
				}
				.tit2{
					font-size: 26rpx;
					color: #909399;
					height: 50rpx;
					line-height: 50rpx;
					display: block;
				}
				.price{
					ont-size: 30rpx;
					color: #303133;
				}
				lc-number-box{
					margin-top: 10rpx;
					width: 38%;
				}
				.stock{
					font-size: 26rpx;
					color: #909399;
					height: 50rpx;
					line-height: 50rpx;
					display: block;
				}
			}
	}
	}
</style>
